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Defining Accessible Educational Resources 


In the 2017 National Education Technology Plan, the U.S. Department of Education 
defines open educational resources (OER) as teaching, learning, and research 
resources that reside in the public domain or have been released under a license that 
permits their free use, reuse, modification, and sharing with others. OER can include 
complete online courses, textbooks, documents, images, videos, and assessment 
items. This protocol itself is an example of an OER. It is licensed under a Creative 
Commons license (CC BY-SA 4.0). This license allows anyone to freely share and 
adapt the protocol as long as there is proper attribution to the authors and any new 
versions include the same license as the original. 


Equity & OER: The Role of Accessibility 


The availability of high-quality OER plays an important role in addressing equity issues 
in education. For its full potential to be realized for every learner, however, OER must 
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be more than openly licensed at a reasonable cost. They must also be usable across 
the variability that learners bring to any learning environment. For this to be the case, 
OER must be designed according to accessibility best practices that ensure they will 
work with the assistive technologies many learners with disabilities use to access the 
curriculum. As an added benefit, accessible OER are also often mobile-friendly, which is 
an important consideration for increasing participation through remote and distance 
learning. The AEM Center article Open Educational Resources: Ensuring Inclusive 
Learning in Uncertain Times explores the relationship between OER, accessibility, and 
equity in more detail. 


Purpose & Use of the Protocol 


During 2019 and 2020, the AEM Center facilitated an Accessibility Community of 
Practice (CoP) with members of the #GoOpen Network. The goal of the CoP was to 
seek creative solutions to OER accessibility challenges. The work of the CoP 
contributed to this protocol, which is based on the best practices outlined in the 
Accessibility Checklist in ISKME's School Librarian OER Curation Framework. The rapid 
move to remote learning in response to COVID-19, and the challenges many school 
districts will continue to face in making sure students with disabilities have accessible 
materials in a timely manner, makes this protocol even more relevant and urgent for 
educators and families. 


The purpose of the Protocol for Curating Accessible OER is to provide detailed yet 
easily implemented techniques for evaluating the accessibility of OER in the following 
common formats: 


e Microsoft Word and Google Suite documents that are often the source files for 
other formats, such as PDF and EPUB publications; and 
e online resources such as websites and instructional videos. 


The Protocol for Curating Accessible OER can be implemented by a range of users, 
from an individual educator who is selecting materials for a lesson to a committee that is 
vetting curricula for district or even statewide adoption. 


The protocol is organized by six areas that are relevant to accessibility practices. The 
mnemonic, “SLIDE,” makes the first five easy to remember: 


1. Styles and Document Structure 
2. Links and Navigation 
3. Image Description with Alt Text 
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4. Design with Color and Typography 
5. Evaluation with an Accessibility Checker 


The sixth area is Video Accessibility. 


Each practice has its own section of the protocol, which begins with its importance for 
OER accessibility. Step-by-step instructions with screenshots show you how to check 
an OER for related accessibility practices. Techniques are categorized by the format of 
the material (e.g., Word, Google, web page etc.). 


This protocol is intended as a decision-making tool to support the vetting of OER. It is 
not intended as a substitute for a full audit of conformance to accessibility standards. No 
conformance claims should be made based on the use of this protocol. 


Should you have any questions or suggestions for improving this protocol, please 


contact the AEM Center team at aem@cast.org. 


Stvles and Document Structure 


A style is a formatting instruction in a word processing application that applies a 
consistent appearance to selected text. A style also “tags” the selected text based on 
the function it performs in the document, such as paragraph text or section heading. 
The styles in a document make up its structure. 


Why Are Styles and Document Structure Important? 


A document with a clear and logical structure can improve understanding for everyone. 
Section headings “chunk” information into smaller segments that are easier to identify 
and process. Concise and descriptive section headings can also help with reader 
comprehension by highlighting the main ideas and relationships in a document. A bonus 
of properly using styles to create section headings: You can use the styles to 
automatically create a table of contents that not only reveals how the information is 
organized but also improves navigation, which is especially helpful on longer 
documents. 


For learners who are blind and use screen reader technology, properly styled headings 
are necessary for efficient navigation. Screen reader users do not always read a 
website or document from beginning to end in a linear way. A screen reader provides 
robust navigation options in addition to reading content aloud. Most screen readers 
support a keyboard shortcut or gesture that provides a list of the section headings. By 
selecting a heading from this list, learners can jump to specific sections of a long 
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website or document. This capability significantly improves the efficiency with which 
learners can navigate the content using their assistive technology, allowing them to 
focus more of their energies on learning. 


Indicators of Best Practices for Styles and Document Structure 


When evaluating an OER for accessibility, here’s what to look for: 


e Content is organized into sections, and each section starts with a unique heading 
or subheading that succinctly describes what the section is about. 

e Section and subsection headings are created with proper markup. This means 
that the creator used styles rather than only formatting options, such as making 
the text bigger and bold. 

e Headings and subheadings are used sequentially (e.g., Heading 1, Heading 2, 
etc.). Typically, a web page or document should have only one Level 1 Heading 
(H1) for the page/document title, with a Level 2 Heading (H2) used for the major 
sections, a Level 3 Heading (H3) for the subsections, and so on. You can think of 
this as an outline structure. An example of an exception to this guidance would 
be a comprehensive document with a cover page, such as this protocol. In this 
case, the Title style is applied to the name of the document. 


Checking for Proper Use of Styles and Document Structure 


Select a format from this list for instructions on how to check the proper use of styles for 
section headings in an OER: 


Use of Styles in Microsoft Office Documents 
Use of Styles in Google Workspace Documents 
Use of Styles in Web Pages 

Use of Styles in PDF Documents 


Use of Styles in Microsoft Office Documents 

In Microsoft Word for Office 365, place your cursor anywhere in a section heading’s text 
and check to make sure the appropriate heading style (Heading 1, Heading 2) has been 
selected in the Home tab of the Ribbon. 


To check the logical organization of the headings: 


1. Open the Navigation Pane (View, Navigation Pane). 

2. Choose the Document Map or Headings tab (this will vary according to the 
version of Office). 

3. Confirm that every item that is styled to look like a heading in the document is 
listed in the Navigation Pane (has a heading style applied to it). As you select 
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each heading in the Headings tab, you will navigate the section/subsection 
structure of the document in much the same way a screen reader user would 
(most screen readers support a keyboard shortcut to skip from one heading to 
the next). 


Dit BQ oe 
v Crusades Activity — Primary Sources 
v Document A: Raymond d’Aguiliers 
Vocabulary References: 
v Document B: Ibn al-Athir (Modifie 
Vocabulary References: 
v Document C: ?-Unknown 
Vocabulary References: 


Another way to check the document structure in Microsoft Word is to add a table of 
contents based on the section headings by choosing References, Table of Contents. 
The table of contents should provide a logically organized outline of the document’s 
content. 


On a PowerPoint slide, the use of descriptive titles performs a similar function as the 
section headings in Word. Use the Outline View (View, Outline View) to confirm each 
slide has a descriptive and unique title. If the design requires it, the slide title can be 
hidden from view while keeping it in the reading order for screen readers: 
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1. Open the Selection Pane (Home, Arrange, Selection Pane). 


as): ree 


Picture Shapes Text 
Box 


I) Reorder Objects 


Reorder Overlapping Objects 


Reorder Objects 

Bring to Front 
Send to Back 
Bring Forward 


Send Backward 


Group Objects 
Group 
Ungroup 


Regroup 


Position Objects 
I= Align i 
*\ Rotate 


@ Selection Pane.. 


2. Make sure the slide title (and optionally a slide number) is one of the first things 
listed near the bottom of the Selection Pane. Items near the bottom of the 
Selection Pane are read first, while those near the top are read last: 


Selection Pane ioe 


[ Show All | [ Hide All | 


Picture 3 © 
Subtitle 2 oO 
Title 1 


Reading Order 


3. To hide a slide title, select the icon that looks like an eye to the right of its name. 
The title will be hidden in the slide, but it will still Keep its place in the reading 
order for screen reader users. 


Use of Styles in Google Workspace Documents 
The Grackle add-on for Google Workspace will identify improper use of styles in Google 
Docs, including improper nesting. However, a subscription is needed to get guidance on 
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how to fix the errors Grackle identifies: 
Headings @ 


“6 Headings should be used 
Y  Asingle “Heading 1” should be used 


» Headings must be properly nested 


Alternatively, you can check the heading structure manually. Place the cursor anywhere 
inside the section heading text and confirm the appropriate style is selected in the 
Styles dropdown menu in the Google Docs toolbar: 


100% ~ Heading2 ~ Arial - 


Normal text e 


v 


Title 


Subtitle > 


v 


Heading 1 
¥ Heading 2 


Heading 3 > 


A style of “Normal text” would indicate the heading has been created through formatting 
options only (making text larger and bold). As with Microsoft Word documents, another 
way to check the document structure is to add a table of contents based on the section 
headings, by choosing Insert, Table of Contents. 


Google Slides does not have an outline view or a selection pane similar to the one in 
Microsoft PowerPoint. For the best results, use the placeholders provided in the various 
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templates to make sure each slide has a unique slide title and a reading order that 
makes sense. 


Use of Styles in Web Pages 


Use the free totally bookmark or browser extension from Khan Academy to view the 
heading structure of a web page and confirm that headings are properly nested: 


1. Once you have the extension installed, select the bookmark. The icon for totai1y 
(a pair of eyeglasses) will appear in the lower left corner of the screen. 
2. Select this icon and choose Headings. 


Headings 
Highlights headings (<h1>, <h2>, 
etc) and order violations 


Contrast 
Labels elements with insufficient 
contrast 


Link text 
Identifies links that may be confusing 
when read by a screen reader 


Labels 
Identifies inputs with missing labels 


Image alt-text 
Annotates images without alt text 


Landmarks 
Labels all ARIA landmarks 


EXPERIMENTAL 
Screen Reader Wand 


Hover over elements to view them as 
a screen reader would 


ee 
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3. A dialog in the lower right corner will show you the heading structure for the 
current web page, with errors explained in a separate tab. 


Headings Annotate: v X 


~ Nonconsecutive heading level used (h2 — h4) P 


This document contains an <h4> tag directly following an 
<h2>. In order to maintain a consistent outline of the page 
for assistive technologies, reduce the gap in the heading 
level by upgrading this tag to an <h3> or <h2>. 


Relevant code: 


<h4>This <code>&lt;h4&gt;</code> heading 
has an invalid level</h4> 


Use of Styles in PDF Documents 

Use the free PDF Accessibility Checker (PAC 3) (available only for Windows) to check 
the document structure of a PDF document. PAC 3 will flag it as an error if a document 
has no assigned headings or if heading styles are not nested properly (if any headings 
are skipped over in the document structure). You can manually check the document 
structure with PAC 3 as follows: 


1. Open the PDF document with PAC 3. 
2. Choose the Logical Structure option. 


Summary Report 


> 4 This PDF file is not PDF/UA compliant. 


Checkpoint Passed Warned Failed 
of PDF Syntax 29 0 0 
of Fonts . 80 0 0 
oP Content 2488 0 0 
@ Embedded Files Ls) 0 0 
@Z Natural Language 1140 0 0 
4 Structure Elements 36 0 0 
A Structure Tree 2 22 0 
> 4 Role Mapping 42 0 2 
> 4 Alternate Descriptions 88 0 

9 Metadata - 0 2 
4 Document Settings 8 0 0 
Results in Detail = Summary Report as PDF 
©® Screen Reader Preview fe Logical Structure 


\laa Document Statistics 
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3. Choose Structure Elements to see the document structure. 

4. Confirm that text that looks like a heading in the Page View is marked up as such 
in the Structure Elements pane. Also, check to make sure the headings are 
properly nested in a logical way (e.g., Heading 3 is not used before Heading 2, 


etc.). 


Logical Structure - POUR-is-it-accessible. pdf - ogg 
Structure Elements Artifacts Properties Page View  Rolemap 
U (Oo Figure Te acccssibie Eaucations! Materints CJ CAST | Until learning has no limits 
D (Oo Figure 
qh ccramier conn 
n | Marked Content (H1) i Aecosubilty guidelines cen be conhi The 
. wed and Robust can he ple stares 


tachnolog cassibie. The questions in this document will ocu 
you make sure all students can use the materals selected in your school, district ar st 


Ex ae 
» | Marked Content (H2) 


Percenabie matenals present nformaton in a fexible 


If you have access to Adobe Acrobat DC (the version of Adobe Acrobat with editing 
capabilities), you can open the Tags panel (View, Show/Hide, Navigation, Tags) to 
review the tags assigned to the items in the PDF document. The Tags panel indicates 
the order in which items will be read by screen readers. You can select a tag to highlight 
the content in the document that corresponds to it. The tags should be in the correct 
order in the Tags panel (a level one heading should come before a level two heading): 


0 


Tags 


El-~ @ 


W 
v f 0s 
52 v @ <Part> 
> 
O 5.48 
\ @<b 


Links and Navigation 


Hyperlinks, usually just called links, are a foundational concept of the web. They allow 
authors to reference additional online resources that enhance the richness of OER. 
They can also improve the usability of long documents by providing navigation between 
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the sections of the document. You can see examples of these uses of links throughout 
this protocol. 


Why Are Descriptive Links Important? 


Descriptive link text replaces a web address with a description of the link’s destination. 
The use of descriptive link text improves usability for all learners. The link text sets 
expectations about not just the content on the other side of the link but also any actions 
that might take place when it is selected: Will a new window or tab open? Will a file be 
downloaded? By helping learners quickly answer these questions, descriptive links 
improve the navigation and overall usability of OER for everyone. 


Descriptive links are helpful for learners who are blind and use screen reader 
technology to listen to the content of a web page or document. Most screen readers 
support a keyboard shortcut or gesture that brings up a list of all the links to assist with 
navigation. If a link reads as “click here” or “learn more” when presented on a list, it will 
be difficult to determine what will happen when the link is selected. For this reason, links 
need to be meaningful on their own, without relying on the surrounding content to 
provide context. 


Indicators of Best Practices for Descriptive Links 
When evaluating an OER for accessibility, here’s what to look for: 


e Links make sense on their own, without the surrounding text for context, and they 
do not use generic language such as “click here,” “about,” or “learn more.” 

e Links avoid the use of full web addresses as the link text. To provide a better 
experience for those listening with screen readers, the full web address is hidden 
behind more descriptive link text or a link shortener is used (with a descriptive 
custom ending). 

e Links prepare the reader for any unexpected actions such as the opening of a 
new window or tab, or the downloading of a file. 

e For resources that are also going to be printed (e.g., handouts for presentations, 
instructions, etc.) it may be helpful to use a link shortener and to include the 
shortened version of the full web address (with a custom ending) in parenthesis 
after the more descriptive link text. 


Checking for Descriptive Links 


You may need to do a content review by scanning the document or website and 
flagging any links that do not follow best practices for meaningful, descriptive links. 
Some issues, such as links that use generic language (e.g., “click here”) or a full web 
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address as the link text, will be easy to spot. Others, such as links that open new 
windows without warning, may require more careful testing - you may need to follow the 
link to confirm the action resulting from its selection. 


Select a format from this list for additional guidance on how to check for descriptive and 
meaningful link text in an OER: 


Descriptive Links in Microsoft Word Documents 
Descriptive Links in Google Workspace Documents 
Descriptive Links in Web Pages 

Descriptive Links in PDF Documents 


Descriptive Links in Microsoft Office Documents 


At the time of this writing, the Microsoft Office Accessibility Checker does not flag links 
that use generic text (“click here”) or full web addresses. A content review is 
recommended. 


Descriptive Links in Google Workspace Documents 


The Grackle accessibility add-on for Google Workspace identifies links that are not 
descriptive under its Contents section. However, in testing this feature missed a number 


of items that used generic text or a full web address. A content review is recommended. 
Descriptive Links in Web Pages 


Use the free totally bookmark from Khan Academy to check for descriptive links ona 
web page. Once you have the extension installed, select the bookmark. The icon for 
tota11y (a pair of eyeglasses) will appear in the lower left corner of the screen. Select 
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this icon and choose Link text: 


Headings 
Highlights headings (<h1>, <h2>, 
etc) and order violations 


Contrast 
Labels elements with insufficient 
contrast 


Link text 
Identifies links that may be confusing 
when read by a screen reader 


Labels 
Identifies inputs with missing labels 


Image alt-text 
Annotates images without alt text 


Landmarks 
Labels all ARIA landmarks 


EXPERIMENTAL 
Screen Reader Wand 


Hover over elements to view them as 
a screen reader would 


anal 
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A dialog in the lower right corner will show you any errors related to links that are not 
descriptive, along with suggestions for how to fix each error: 


Link text PN\alace)t-\(- eg 


~ Link text is unclear po) 


The text "is unclear without context and may be confusing 
to screen readers. Consider rearranging the <a></a> tags 
or including special screen reader text. 


Relevant code: 


<a id="mainContent" class="skipNavTarget" 
tabindex="-1"></a> 


You can also manually check the links by navigating through the web page using just 
your keyboard. As you press the Tab key, links (and other controls such as form fields) 
should receive a visible keyboard focus and this focus should move around the page in 
a logical order. As you tab through the page, review the link text to make sure it makes 
sense on its own, without the surrounding text providing context (as this is the way it 
may be accessed by assistive technology users). 


Descriptive Links in PDF Documents 


Open the PDF document in the free Acrobat Reader and perform a tab order test: Press 
the tab key on your keyboard to navigate by links. Links should be highlighted ina 
logical order. As you review the tab order, you should also review the link text to make 
sure it is descriptive. 


Image Description with Alt Text 


Images can make content in OER more visually appealing and engaging, particularly 
when those images are relevant to the content. Images can also support understanding 
by providing multiple representations of the information. 
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Why Is Image Description with Alt Text Important? 


Not everyone uses sight to gain information from images. Alternative text or “alt text” is 
a concise summary of the information an image conveys. Someone who is blind can 
enjoy equivalent access to this information by having the summary read aloud to them 
with screen reader technology. Another reason to provide text alternatives relates to 
connectivity issues, particularly in situations of remote learning: Turning images off 
speeds up browsing on a slow connection and saves bandwidth while accessing the 
content on a mobile device with a limited data plan. 


Indicators of Best Practices for Image Description with Alt 
Text 


When evaluating an OER for accessibility, here’s what to look for: 


e Images that convey information include appropriate alternative text. The alt text 
should be brief (no more than 125-150 characters, or a couple of sentences). 
Screen readers announce when an image is selected. It is not necessary to 
include “image of” or “graphic of” in the alt text. 

e Images that are purely decorative are marked up in such a way that they can be 
skipped by a screen reader. Not all authoring tools provide the option to indicate 
an image is decorative. For those that do not, the use of the word “decorative” for 
the alternative text is recommended. 

e Images that are functional (included in a link) have alternative text that reflects 
the action that will take place when the link is selected (e.g., a new window will 
open, or a file will download). 

e More complex images (e.g., diagrams, charts) may need a long description that 
explains the image in more detail than is possible with just the alternative text. 
This long description should be provided in the surrounding text whenever 
possible, as everyone can benefit from the more detailed explanation. If space is 
an issue, the long description can be provided in another section of the document 
that can be reached from a link near the image. 


Checking Images for Alt Text 


In addition to confirming that an image either has alt text or has been marked as 
decorative (per instructions below), you will need to confirm the alt text is appropriate for 
the purpose and context in which the image is used. Select a format to learn how to 
check an image for alt text: 


e Alt Text in Microsoft Office Documents 
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e Alt Text in Google Workspace Documents 


e Alt Text in Web Pages 
e Alt Text in PDF Documents 


Alt Text in Microsoft Office Documents 


The built-in accessibility checker (found in Review, Check Accessibility) will identify 
images that are missing alt text. Selecting the item listed in the checker will highlight the 
image with the error. The steps for confirming an image has appropriate alt text will 
depend on the version of Office you have installed. 


In Microsoft Word and PowerPoint for Office 365: 


1. With the image selected, choose Alt Text in the Picture Format tab of the Ribbon 
(or right-click the image and choose Edit Alt Text). This will open the Alt Text 
pane on the right side of the screen. 

2. Make sure the image has an appropriate description, or check the box for “Mark 
as decorative” if the image does not add any meaning and is used purely for 
decoration: 


Alt Text x) 


How would you describe this object and its 
context to someone who is blind? 


(1-2 sentences recommended) 


Alternative text goes here| 


Mark as decorative 
For older versions of Microsoft Office: 
1. With the image selected, choose Format, Picture (or right click on the image and 
select "Format picture"). 


2. Choose the Layout and Properties pane. 
3. Expand the Alt Text section. 
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4. Make sure appropriate alt text is included in the Description field and that the 
Title field is left blank. This will ensure the alt text is properly preserved if the 
document or presentation is converted to PDF. 


Alt Text in Google Workspace Documents 


The free version of the Grackle accessibility checker for Google Workspace will identify 
any images that are missing alt text. However, you will need to manually inspect the 


images to make sure the alt text is appropriate. 


To confirm that an image has appropriate alt text, right-click on it and choose Alt Text. 
Google Suite (Docs and Slides) is similar to older versions of Microsoft Office in that it 
provides a Title and a Description field, but only the text entered in the Description field 
is preserved when the document or presentation is converted to PDF. 


Alt Text x 


Alt text is accessed by screen readers for people who might have trouble seeing 
your content. 


Title 


Description - 
P Alternative text goes here.| 


Alt Text in Web Pages 


The free totally bookmarklet from Khan academy can help you identify images that are 
missing alt text. Once you have tota11y installed, launch it by selecting the icon 
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eyeglasses) at the bottom of your web browser window, then choose “Image alt-text”: 


Headings 
Highlights headings (<h1>, <h2>, 
etc) and order violations 


Contrast 
Labels elements with insufficient 
contrast 


Link text 
Identifies links that may be confusing 
when read by a screen reader 


Labels 
Identifies inputs with missing labels 


Image alt-text 
Annotates images without alt text 


Landmarks 
Labels all ARIA landmarks 


EXPERIMENTAL 


Screen Reader Wand 
Hover over elements to view them as 
a screen reader would 


rl 


Each error will be explained in more detail on a pane that will open in the lower right 
corner of the screen. Select the magnifying glass next to each error to highlight the 
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image that is missing alt text: 
Image alt-text Annotate: v xX 


~ Image is missing alt text 


This image does not have an associated "alt" attribute. 
Please specify the alt text for this image like so: 


<img 
src="https://images.outbrainimg.com/transf 
orm/v3/eyJpdS161IjM0ZGI3YzFhYWZhNTZ jOTUOM}Y 
4MmU0 ZTVhMzd1NDOQ3NWExZmYONzlmNDZhYWI4NjEZM 
jdjMDBj)ZTEwWOWLyYzZEiLCJ31jo0MiwiaCI6NDIsImQ 
i0jJEuNSwiY3Mi0jAsImYi0jB9.jpg"” alt="Image 
description"> 


If the image is decorative and does not convey any 
information to the surrounding content, however, you may 


Shei Wale mbbeibn hn meh ee eis oe Mela mn bbeilns ch 


Errors & 


Alt Text in PDF Documents 


For PDF documents, use the free PDF Accessibility Checker (PAC 3) to confirm that 
appropriate alt text is included with each image: 


1. Open the PDF document in both Adobe Acrobat Reader and PAC 3 and arrange 
your windows so that you can see both views of the document side by side. 

2. In PAC 3, select the Screenreader Preview option to view a linear version of the 
PDF document (the order shown is the order in which a screen reader will read 
the content). 

3. Confirm that each image shown in Acrobat Reader has appropriate alt text as 
shown with a white background in the screen reader preview that PAC 3 
provides. 


Checking Alt Text for Purpose and Context 


Automated checkers can identify images that are missing alt text, but they are not as 
good at analyzing the quality of that alt text. More recently, artificial intelligence has 
been used to automatically generate alt text. This feature will continue to improve with 
time, but the results typically require some editing for accuracy. 


Checking for accurate and useful alt text is both an art and a science. It requires some 
subjectivity because the appropriate alt text will require consideration of the purpose for 
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selecting an image and the context in which it is used. Given that, identifying high- 
quality alt text is a skill that is improved with practice and collaboration. For more 
complex images such as charts and diagrams, we recommend approaching long 
descriptions (a longer version of alt text) as a group activity that takes multiple 
interpretations into consideration to arrive at the best description. 


Images generally fall into three broad categories: 


e Decorative images are used to provide visual appeal and are not essential to 
understanding the content. These images should be marked up in such a way 
that they can be skipped by screen readers to reduce the “noise” in the content 
that is read aloud to blind or low vision learners. 

e Functional images are part of a link and should provide a description of the 
destination of the link or the action that will take place when the link is selected 
(e.g., downloading a file in another format). 

e Informative images are essential for understanding and need to have a concise 
description that starts with a broad overview of the key information followed by 
key details. The details you include in the description will depend on the purpose 
or goal for using the image. 


The alt decision tree from the World Wide Web Consortium (W3C) can help you 
determine what kind of image is being described in an OER. As you review the alt text, 
consider the context where the image is used. Is the image already described in the 
surrounding text? If so, it should be treated as a decorative image to avoid redundant 
information being read aloud to screen reader users. 


Design with Color and Typography 


The effective use of color and typography can add aesthetic appeal and make content 
more inviting and engaging for learners. It can also mean the difference between a 
design that is easy to read and one that presents barriers that impact a learner’s 
motivation for engaging with the content. 


Why is Choice of Color and Typography Important? 


Text with low contrast may be difficult to perceive for some learners, including those 
with low vision or those viewing the content in less-than-ideal lighting conditions (where 
glare can be an issue). Some learners may also have difficulty seeing certain colors due 
to color-blindness. With good color contrast, learners can focus more of their energies 
on understanding the information, rather than on overcoming barriers to perception. 
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As with the use of color, typography can have an impact on how much energy learners 
spend to perceive and process information. Preferences for fonts and spacing vary by 
learner, and ideally the reading application provides options for personalizing 
adjustments to meet the unique needs of each individual (see the AEM Center's 
Personalizing the Reading Experience web page for examples). Starting with a good 
baseline for font choice, text size, and other elements of typography can provide a good 
experience by default. 


Indicators of Best Practices for Use of color 


When evaluating an OER for accessibility, here’s what to look for: 


e Colors should meet a minimum color contrast requirement of 4.5:1 for body text 


and 3:1 for large text (18 pt. or larger, typically the text used in section headings). 
Body text only needs to meet the lower 3:1 contrast ratio if it is 14 pt. or larger 
and bold. 

Color should not be used alone to convey meaning. An additional cue should be 
used for those who are unable to distinguish between different colors (or 
between shades of the same color). 

Links should not have their underline removed through styling. If the underline is 
removed, the link text needs to have a color contrast ratio of 3:1 with the 
surrounding text (in addition to the requirement of a color contrast ratio of 4.5:1 
with the background color). 

If instructions are included in an OER, make sure they do not refer to color and 
other visual characteristics (e.g., shape, size, or location). 


Indicators of Best Practices for Typography 


When evaluating an OER for accessibility, here’s what to look for: 


e Use sans-serif fonts for body text. Sans-serif fonts, such as Arial or Verdana, lack 


any ornamentation at the end of their strokes. This lack of ornamentation 
increases the space between the letters and makes the text easier to read, 
especially at smaller text sizes. 

Avoid the use of formatting alone for emphasis (e.g., bold or italics). Use text 
instead (e.g., “Important:” or “Note:”) to highlight information that needs focused 
attention from learners. Screen readers do not always announce changes in 
styling by default. 

Left-align blocks of text. Full justification can add uneven spacing between 
words, resulting in distracting “rivers of whitespace” that run down the page 
where extra spacing has been added. 
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e Begin with a good baseline text size. For documents, a baseline text size of 12 
pt. for body text is recommended. For slide decks, 22-24 pt. for the body text is 
recommended as a minimum text size. 


Checking for Color Contrast 

Use a free color contrast checker such as the Colour Contrast Analyser from TPGi to 
make sure the choice of background and foreground colors meet the minimum contrast 
ratio requirements. 


On Windows, the Colour Contrast Analyser includes a color picker to allow you to select 
the foreground and background color combination that will be checked. On the Mac, the 
Colour Contrast Analyser will open the Mac’s color picker tool when a color swatch is 
selected, but the functionality will be the same. 


Options Image Help 
Foreground Background 
Colour select: Hex: Colour select: Hex: 
a © «C7 «#000000 v| Jy) |\#FFFFFF 
Result - luminosity 
Text Foreground:#000000 
ra | Pass (AA) Background:#FFFFFF 
vs | Pass (AAA) The contrast ratio is: 21.0:1 
Large text Text passed at Level AA 


Text passed at Level AAA 
¥ Pass (AA) Large text passed at Level AA 


Yd Pass ( AAA) Large text passed at Level AAA 


[_] Show contrast result for colour blindness Copy results 


This tutorial video on using the Colour Contrast Analyser from the AEM Center 
demonstrates the use of the tool to check color contrast on both Windows and the Mac. 


The option to check for color contrast is sometimes included in accessibility checkers for 
websites. For example, it is available in WAVE from WebAIM. 


Checking for Use of Color and Typography 

The use of colors and other visual characteristics (Shape, size, and location) in 
instructions provided in an OER will require a content review. The same is true for 
checking the typography (text size, fonts and spacing) used in a resource. 
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One way to check that color isn’t used alone to convey meaning is to turn on the 
grayscale view in your operating system and confirm the content makes sense when 
color is removed. This option is especially helpful for reviewing charts and diagrams to 
make sure they include additional cues and do not rely on color alone for meaning. 


The option to switch to a grayscale view will typically be found in the settings or system 
preferences of your operating system: 


Windows 10: Settings, Ease of Access, Color Filters 
iOS 13 or later (iPad and iPhone): Settings, Accessibility, Display and Text Size, 
Color Filters 
Mac: System Preferences, Accessibility, Display 

@ Chromebooks do not have a grayscale option, but an extension such as High 
Contrast can provide similar functionality for any content accessed through the 
Chrome web browser. 


Evaluation with an Accessibility Checker 


Some authoring tools now include a built-in accessibility checker to make it easier to 
identify and correct accessibility issues. Even the best automated accessibility checking 
tools have their limitations due to the subjective nature of many accessibility practices. 
For example, an automated checker may reveal that an image has alt text, but it may 
not be able to determine if that alt text accurately describes the content of the image. 
This determination will often require subject matter knowledge, as well as a 
consideration of the context and the purpose for using the image. 


Why is Evaluation with an Accessibility Checker Important? 


As long as you keep the limitations of automated checkers in mind, and don’t see them 
as a replacement for learning best practices, they can make a valuable contribution to 
your evaluation of OER. Whenever possible, automated checkers should be used as a 
starting point for authentic evaluations that includes usability testing with a range of 
learners who can test how well the content will work with a variety of tools, including 
assistive technologies and mobile devices. 


Best Practices for Using an Accessibility Checker 


e Use an accessibility checker to verify that an OER conforms to those accessibility 
practices that can be assessed with an automated check (e.g., missing alt text). 
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e Review the guidance provided by the accessibility checker (if any is available) to 
help you understand any recommended fixes and build up your knowledge of 
accessibility best practices. 

e Review the content of the OER on a mobile device to ensure it is not only 
accessible but also mobile-friendly. 

e Identify learners who can provide authentic feedback about the usability of 
resources and compatibility with the technologies they use (including assistive 
technology). 


Using an Accessibility Checker 
Select a format to learn how to use its accessibility checker: 


Using an Accessibility Checker in Microsoft Office Documents 
Using an Accessibility Checker in Google Workspace Documents 
Using an Accessibility Checker with Web Pages 

Using an Accessibility Checker with PDF Documents 


Using an Accessibility Checker in Microsoft Office Documents 


The Accessibility Checker for Microsoft Office 365 applications is found in the Review 
tab of the Ribbon. Launching it will open an Accessibility Checker pane on the right side 
of the screen. Select any of the errors listed in this pane to highlight the element (image, 
heading, etc.) with the accessibility error in the document. Selecting an error will also 
display an explanation with steps for fixing the error at the bottom of the pane. The 
Windows version of the Office Accessibility Checker also provides Recommended 
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Actions for quick fixes from a dropdown menu (e.g., verifying an image description): 
Accessibility ~ x 
Inspection Results 

Warnings 

> Hard-to-read text contrast (1) 

Intelligent Services 


V Suggested alternative text 
Picture 1 Vv 


Recommended Actions 
Ke! Verify description 
Keep access YE Mark as decorative 


| work 
Additional Inf, Other Suggestions 


Why Fix? @® Learn more 


There is alterndeww-cerewerpourmerewenrrrane 
that was automatically generated by an 
intelligent service. Review each suggestion 
carefully to make sure it accurately 
describes your picture. If you want to 
change the suggestion, just type over it. 


Read more about making documents 
accessible 


Note: On older versions of Office, the Accessibility Checker may not be in the Ribbon. 
You may have to choose File, Info, Check for Issues to launch it. 


Using an Accessibility Checker in Google Workspace Documents 


The Grackle add-on for Google Workspace will identify accessibility errors in Google 
Suite applications (Docs, Sheet and Slides). Grackle can perform a check for free but 
getting guidance on fixes requires a subscription. To install Grackle: Choose Add-ons, 
Get Add-ons, and do a search for Grackle. 


Once Grackle is installed, launch it by choosing Add-ons, Grackle (Docs, Sheets or 
Slides, depending on the Google Suite application), Launch. This will perform a check 
and list any errors in a pane to the right of the document. Select an error to expand it 
and read an explanation with a list of all instances of that error in the current document. 
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For example, if there are multiple images with missing alt text, Grackle will list each as a 
separate error so that you can directly move to that image in the document and perform 
a fix. 


Elements 4 | 


x Images should have alternative text 
i Found images without alternative text. 
“Slide 2 


~ (image GS] 


Using an Accessibility Checker with Web Pages 


The totally extension from Khan Academy can perform some basic checks on a web 
page. It includes options for checking the document structure (headings), color contrast, 
link text, and alt text. You have learned how to use these options for tota11y in the other 
sections of this protocol. 


For a more thorough check, the online WAVE tool from WebAIM (which can also be 
installed as a WAVE Google Chrome or Firefox extension) is also available. It provides 
a list of errors along with icons that highlight the error on the page when each icon is 
selected. A color contrast checker is also included in WAVE. 


To check a website with WAVE, you have two options: 


e Goto the WAVE website, enter the address of the website in the text field at the 
top of the page and press Enter/Return to view the results. 

e With the website to be checked open in Google Chrome or Firefox, select the 
icon for the WAVE extension, and a pane with the results should appear on the 
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left side of the screen. 


@ WAVE powered by 


WebAIM 
web accessibility evaluation tool 


Address: http://aem.cast.org/navigating/aem-in-actior © 


Styles: OFF @@ on 


Details 
& i= & Fit 


aa 


Summary Details Reference Structure Contrast 


A 8 Alerts 
@ 1 X Skipped heading level 


@ @ 
@ 3 X Redundant link 


@aqa? 


@4 X Redundant title text 


BEa86° 
Using an Accessibility Checker with PDF Documents 
The free PAC 3 PDE Accessibility Checker for Windows can be used to check the 


accessibility of a PDF document if you don’t have access to Adobe’s Acrobat tool and 
its built-in checker. 
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To perform a full accessibility check on a PDF document with PAC 3, select the browse 
button at the top of the screen and locate document on your computer. 


“ : - = 
PDF Accessibility Checker 3 © 
2 = About 
8 Zugang fOr alle 
Accks tous 
=. poammapat tutti 
Access for all 
Tags Pages Size 
Summary Report 
Sponsors 
Checkpoint Passed Warned = Failed pr tsatz 
@ POF Syntax 0 0 0 
@ Fonts 0 0 0 
Zugang fOr alle 
@ Content 0 0 0 > N Rana wail ane 
@ Embedded Files ) 0 0 Povey artngc 
Q@ Natural Language 0 0 0 


Schweizerischer Zentralverein 


. nena tei : . : En) 
@ Structure Tree 0 0 0 


@ Role Mapping 0 0 0 fur das Blindenwesen 
@ Alternate Descriptions 0 0 0 
@ Metadata 0 0 0 
@ Document Settings 0 0 0 B | TV cous 

o < 

z Hl © por 

ce _/> 
A 1> 
(aa Accessible documents for everyone 
a 


A summary of the results will be shown, but you can choose Results in Detail to review 
any errors more carefully. This will open a tree view with errors organized into 
categories that can be expanded to see all instances of each error. When you select an 
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instance, a pane on the right side will display where the error is found in the document. 


- ogc 
me in — Alternative text missing for 
4 / J . 

—— = "Figure" structure element 
4 ISO 32000-1 0 
YA PDF syntax 0 
Y 4 Logical structure syntax 0 
Y f Structural parent tree 0 
' Y Fonts 0 
> > 4 Content 327 
» YA Embedded Files 0 
> Natural language 0 
4 > 4 Logical Structure 17 
. Y Structure Elements >. fF ———wqeqwue 
> Ad Structure Tree 8 
. Y Role mapping 0 > 
4 > 4 Alternative Descriptions 9 


4 > 4 Alternative text for Figure” structure elements 9 
x Alternative text missing for "Figure" struct... 
> 4 Alternative text missing for “Figure” struct... 
> 4 Alternative text missing for “Figure” struct... 
x Alternative text missing for "Figure™ struct... 
> 4 Alternative text missing for "Figure™ struct... 
> 4 Alternative text missing for "Figure™ struct... 
> 4 Alternative text missing for “Figure” struct... 


> 4 Alternative text missing for “Figure” struct... 
> 4 Alternative text missing for "Figure™ struct... 
4 Alternative text for Formula” structure eleme... 0 
4 Alternate names for form fields 0 
4 Alternative description for annotations 0 v 


Video Accessibility 


Videos provide options for presenting information in an immersive way that engages 
today’s learners. They can be used to support learning in a variety of ways, from 
providing background information to demonstrating the steps of a science experiment. 


Why is Video Accessibility Important? 


Videos that include closed captions are not only more accessible to learners who are 
deaf and hard of hearing, they improve understanding and usability for everyone, 
including: 


e English language learners 
e Learners with limited or emerging literacy 
e Learners who are new to a topic that has specialized vocabulary or jargon 
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e Anyone listening to the video in a public setting where the ambient sound is too 
loud 


Audio description consists of voice-over narration that describes important visual details 
that cannot be understood from the main soundtrack alone. The goal with audio 
description is to make the visual information in media accessible to people who are 
blind, but others may benefit from the explicit explanations as well. 


Videos should also have transcripts. Transcripts make it possible to quickly skim 
through or search the content without the need to play a long video to find the exact 
spot where an important piece of information has been shared. Transcripts also benefit 
learners who are deaf-blind. They can access the information in a transcript using a 
braille display, which is a small device that converts text into braille in real time. 


Indicators of Best Practices for Video Accessibility 


e Videos have quality captions that include not only dialogue, but descriptions of 
other sounds that are important for understanding the content. 

e Speaker identification is provided if there are multiple individuals. 

e Captions are accurate and in sync with the audio in the video. 

e A transcript is provided alongside the video, or a link to the transcript is located 
near the video. The transcript includes descriptions of any information that is only 
communicated visually in the video, along with the dialogue and descriptions of 
sounds that are important for understanding the content. 

e Audio descriptions are provided, either as a secondary track or as a Separate 
video that can be accessed from a link near the non-described video. 

e The video player can be controlled using only the keyboard. 

e Videos do not include blinking or flashing content that could result in a seizure. 


Checking for Video Accessibility 


Each video in a document or website should have alt text that describes what it is about 
(see the !mage Description with Alt Text section of this guide for additional information 
on image accessibility). In addition, it should include closed captions that can be turned 
on and off using a button in the player (usually indicated by the CC symbol). You should 
play the first minute or so of a video to quickly determine if it only has automatic 
captions available. You will note these captions by the missing punctuation and other 
obvious inaccuracies. You should also choose a random point later in the video to 
confirm your findings about the quality of the captions. 
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Use the options menu of the player to determine if a track with quality captions is 
present. Sometimes the automatic captions are presented by default even if a high- 
quality caption track has been provided. 


Audio descriptions, which use narration to describe the action on screen, are also often 
provided as a secondary track that can be toggled on and off as needed. A link to an 
audio-described version of the video is an acceptable option. 


In addition to checking the video content for accessibility, you should make sure the 
player can be controlled using only the keyboard. You can try pressing the Tab key on 
your keyboard to make sure there is a visible focus indicator that moves around the 
various player controls in a logical order. 


Additional Resources from the National AEM Center 


The following resources on the AEM Center website provide additional information on 
accessibility best practices: 


e Vetting for Accessibility 

e Designing for Accessibility with POUR 

e Creating Accessible Documents 

e Creating Accessible Publications with EPUB 
e Creating Accessible Video 
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